<script setup>
import { User_Group } from "@/api";
import { ref, reactive, onMounted } from "vue";

let groupData = ref([]);

// 加载分组列表
let group_list = async () => {
    let { status, msg, data } = await User_Group.group_list({ page: 1, limit: 5 });
    if (status === 200) {
        groupData.value = data.list;
        total = data.count;
    }
}

// 添加分组
let addForm = reactive({
    group_name: '',
})
let form_ref = ref(null);
let rules = reactive({
    group_name: [
        { required: true, message: '请输入分组名称！', trigger: 'blur' },
    ],
})
let dialog_group_visible = ref(false)
let handleAddGroup = async () => {
    form_ref.value.validate(async (valid) => {
        if (valid) {
            let { status, msg } = await User_Group.group_set({ id: 0, group_name: addForm.group_name });
            if (status === 200) {
                let groups_id = groupData.value.map(item => item.id);
                let id = Math.max(...groups_id) + 1;
                groupData.value.push({ id, group_name: addForm.group_name });
                dialog_group_visible.value = false;
            } else {
                ElMessage.error(msg);
            }
        }
    })
}
let handleAddClose = () => {
    form_ref.value.resetFields();
}

// 编辑分组
let group_edit_visible = ref(false)
let editForm = reactive({
    group_name: '',
})
let group_id = ref(0)
let group_index = ref(0)
let handleEditGroup = (group, index) => {
    group_id.value = group.id;
    group_index = index;
    editForm.group_name = group.group_name;
    group_edit_visible.value = true;
}
let handleSubEdit = async () => {
    let { status, msg } = await User_Group.group_set({ id: group_id.value, group_name: editForm.group_name });
    if (status === 200) {
        groupData.value[group_index].group_name = editForm.group_name;
        group_edit_visible.value = false;
    } else {
        ElMessage.error(msg);
    }
}

// 删除分组
let handleRemoveGroup = (group, index) => {
    ElMessageBox.confirm(
        '确定要删除分组？',
        '删除分组',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let id = group.id;
            let index = groupData.value.findIndex(item => item.id === group.id);
            let { status, msg } = await User_Group.group_del(id);
            if (status === 200) {
                groupData.value.splice(index, 1);
                ElMessage({
                    type: 'success',
                    message: msg,
                })
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}

// 分页
let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(5)
// current-page 当前页改变时触发
let handleCurrentChange = async (page) => {
    let { status, msg, data } = await User_Group.group_list({ page, limit: pageSize.value });
    if (status) {
        groupData.value = data.list;
    }
}
// 每页个数改变
let handleSizeChange = async (val) => {
    pageSize.value = val;
    let { status, msg, data } = await User_Group.group_list({ page: 1, limit: pageSize.value });
    if (status) {
        groupData.value = data.list;
        currentPage.value = 1;
    }
}

onMounted(() => {
    group_list();
})
</script>

<template>
    <el-card class="box-card" shadow="never">
        <div class="card-top">
            <el-button type="primary" icon="Plus" @click="dialog_group_visible = true">添加分组</el-button>
        </div>
        <div class="card-body">
            <el-table :data="groupData" :header-cell-style="{ background: '#f4f3f9', color: '#606266' }"
                style="width: 100%">
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="group_name" label="分组名称" />
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small"
                            @click="handleEditGroup(scope.row, scope.$index)">修改</el-button>
                        <el-button link type="primary" size="small"
                            @click="handleRemoveGroup(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="card-bottom">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background="background"
                layout="sizes, total, prev, pager, next, jumper" :page-sizes="[5, 10, 15, 20]" :total="total"
                @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </div>
    </el-card>

    <!-- 添加分组 -->
    <el-dialog v-model="dialog_group_visible" title="添加分组" @close="handleAddClose">
        <el-form ref="form_ref" :model="addForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
            <el-form-item label="分组名称" prop="group_name">
                <el-input v-model="addForm.group_name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" class="add-btn" @click="handleAddGroup">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 编辑分组 -->
    <el-dialog v-model="group_edit_visible" title="编辑分组">
        <el-form ref="form_ref" :model="editForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
            <el-form-item label="分组名称" prop="group_name">
                <el-input v-model="editForm.group_name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" class="add-btn" @click="handleSubEdit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less" scope>
.box-card {
    .card-top {
        margin-bottom: 20px;
    }

    .card-body {
        margin-bottom: 20px;
    }

    .card-bottom {
        display: flex;
        justify-content: flex-end;
    }
}

.add-btn {
    width: 100%,
}
</style>